<template>
	<div class="singer-imgList">
		<div class="singer-imgList-top">
			<h2>{{props.title}}</h2>
			<p>更多></p>
		</div>
		<div class="singer-imgList-bottom">
			<ul>
				<li v-for="item in props.singerList" :key="item.id">
					<img
						:src="item.picUrl"
					/>
					<div>
						<a>{{item.name}}</a>
						<a></a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
  name: "SingerList"
}
</script>

<script setup>
import { defineProps } from 'vue'

const props = defineProps(['title','singerList'])


</script>

<style scoped>
.singer-imgList{
  width: 720px;
}
.singer-imgList-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  border-bottom: 2px solid #c20c0c;
}
.singer-imgList-top>h2{
  font-size: 24px;
  font-weight: inherit;
}
.singer-imgList-top>p{
  margin-top: 14px;
  cursor: pointer;
}
.singer-imgList-bottom{
  width: 100%;
  margin-top: 20px;
  /* height: 368px; */
}
.singer-imgList-bottom>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.singer-imgList-bottom li{
  width: 18%;
  height: 134px;
  padding-bottom: 50px;
}
.singer-imgList-bottom li>img{
  width: 130px;
  height: 130px;
}
.singer-imgList-bottom li>img:hover{
  cursor: pointer;
}
.singer-imgList-bottom li>div{
  display: flex;
  justify-content: space-between;
}
.singer-imgList-bottom li>div>a{
  cursor: pointer;
}
.singer-imgList-bottom li>div>a:hover{
  text-decoration: underline;
}
.singer-imgList-bottom li>div>a:last-of-type{
  width: 17px;
  height: 18px;
  background: url(https://s2.music.126.net/style/web2/img/icon.png?6ef008eaa455074f27505b3467e56f6b) no-repeat 0 9999px;
  background-position: 0 -740px;
}
</style>
